<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Result</title>
    <link rel="stylesheet" th:href="@{/styles.css}" />
    <style>
        html{
            width: 100%;
            height: 100%;
            font-style: sans-serif;
        }
        body{
            width: 100%;
            height: 100%;
            font-family: 'Open Sans',sans-serif;
            margin: 0;
            background-color: #dfdfdf;
        }
        .result{
            position: absolute;
            top:50%;
            left:50%;
            margin: -600px 0 0 -400px;
            width: 800px;
            height: 1200px;
            background-color: white;
            border-radius: 10px;
            box-shadow: #56536A ;
            border-radius: 10px;
        }
        .Re{
            color: #b09f7a;
            text-shadow:0 0 10px;
            letter-spacing: 1px;
            text-align: center;
            position: absolute;
            top: 17%;
            left: 40%;
        }
        .RR{
            width: auto;
            height: 700px;
            position: absolute;
            top: 45%;
            left: 50%;
            margin-top: -350px;
            margin-left: -350px;
        }
        .lo{
            width: 210px;
            height: 25px;
            position: absolute;
            top: 0;
            right: 0;
        }
        .ls{
            border: none;
            background-color:  #dfdfdf;
            position: absolute;
            right: 0;
            top: 5px;
        }
        .ll{
            color: darkred;
            margin-top:4px ;
        }
    </style>
</head>

<body>

<div class="result">
    <div class="RR">
        <h2>Student information:</h2>
        <h3>Name:</h3>
        <p th:text="${taco.students[0].name}" /></br>
        <h3>College:</h3>
        <p th:text="${taco.students[0].college}" /></br>
        <h3>Grade:</h3>
        <p th:text="${taco.students[0].grade}" /></br>
        <h3>Major:</h3>
        <p th:text="${taco.students[0].major}" /></br>
        <h3>StudentNumber:</h3>
        <p th:text="${taco.students[0].studentNumber}" /></br>

        <h2>Select result:</h2>
        <div th:each="tacos : ${taco}">
            <p th:each="ingredient : ${tacos.ingredients}">
                <span th:text="${ingredient.name}" >\</span>
        </div>
    </div>
</div>


<form method="POST" th:action="@{/logout}" id="logoutForm">
    <div class="lo">
        <label class="ll">Wellcome</label>
        <label th:text="${taco.students[0].name}"  class="ll"/>
        <input type="submit" value="Logout" class="ls"/>
    </div>
</form>

</body>
</html>
